<template>
	<view v-show="mainShow">
		<!-- 首页-->
		<view v-show="isShow" class="container flex-column flex-justify-content-space-around">
			
			<view class="img-box d-flex flex-column flex-center">
				<text class="fun-font-14px font-color-66 font-weight" style="letter-spacing: 10rpx">重庆百来码标识</text>
				<text class="fun-font-19px font-color-66 font-weight" style="letter-spacing: 10rpx;font-weight: bolder;">售后服务“了然”管理系统</text>
				<view class="d-flex flex-center" style="width: 100%;">
					<text class="font-left-right fun-font-16px font-color-66 " style="line-height: 30px;">质量追溯</text>
					<view class="img">
						<image class="fun-img" :src="equipmenmsgtlist[0].file"></image>
					</view>
					<text class="font-left-right fun-font-16px font-color-66" style="line-height: 30px;">视觉检测</text>
				</view>
				<view class="d-flex flex-space-between" style="width: 380rpx;margin-top: 10rpx;">
					<!-- <text class="fun-font-16px font-color-66">百战百胜</text> -->
						<view style="width: 230rpx;height: 230rpx;">
							<image class="fun-img" :src="logo"></image>
						</view>
					<!-- <text class="fun-font-16px font-color-66">码到成功</text> -->
				</view>
				
			</view>
			<view class="type-box flex-column flex-justify-content-space-around">
				<view class=" item fun-font-16px flex-row font-color-999 width-100 flex-center " >
					<text class=" " >设备ID：</text>
					<text class="">{{equipmenmsgtlist[0].id}}</text>
				</view>
				<view class=" item fun-font-16px flex-row font-color-999 width-100 flex-center">
					<text class="" >设备机型：</text>
					<text class="">{{equipmenmsgtlist[0].type}}</text>
				</view>
				<view class=" item fun-font-16px flex-row font-color-999 width-100 flex-center">
					<text class="" >设备机身号：</text>
					<text class="">{{equipmenmsgtlist[0].number}}</text>
				</view>
			</view>
			<view class="bottom-box flex-row">
				<view class="course flex-column flex-center">
					<view class="img-u">
						<image src="../../../static/img/u1.svg" class="fun-img" @click="titlelist"></image>
					</view>
					<text class="text fun-font-13px">{{u1}}</text>
				</view>
				<view class="repair border-left border-right flex-column flex-center">
					<view class="img-u">
						<image src="../../../static/img/u2.svg" class="fun-img" @click="mrepair"></image>
					</view>
					<text class="text fun-font-13px">{{u2}}</text>
				</view>
				<view class="suggest flex-column flex-center">
					<view class="img-u ">
						<image src="../../../static/img/u3.svg" class="fun-img" @click="tutoral"></image>
					</view>
					<text class="text fun-font-13px">{{u3}}</text>
	
				</view>
				<!-- 	{{this.$store.getters.getEquipmentInfo.engineer_id}} -->
			</view>
			<view class="d-flex flex-space-between" style="width: 380rpx;">
				<text class="fun-font-16px font-color-66">百战百胜</text>
					<!-- <view style="width: 50rpx;height: 50rpx;">
						<image class="fun-img" :src="logo"></image>
					</view> -->
				<text class="fun-font-16px font-color-66">码到成功</text>
			</view>
		</view>
		<view v-show="!isShow"  class="flex-column flex-center font-color-999  fun-font-14px" style="height: 800rpx;">
			<image :src="errImage" style="width: 200rpx;height: 200rpx;"></image>
			<text style="font-weight: 600; margin-top: 20rpx;">{{errInfo}}</text>
		</view>
	</view>
	
</template>

<script>
	import {
		getEquipmentMsg
	} from '@/api/user/index.js'
	export default {
		data() {
			return {
				logo: require('@/static/img/favicon.png'),
				mainShow:false,
				errImage:require('@/static/img/noinfo.png'),
				errInfo:'',
				isShow:false,
				title: '',
				u1: '维护教程',
				u2: '设备报修',
				u3: '投诉建议',
				help: '在线帮助',
				id: '',
				status:'',//是否录入
				equipmenmsgtlist: [{
					file: ''
				}]
			}
		},
		methods: {
			titlelist() {
				uni.navigateTo({
					url: '/pages/index/proposal/titlelist'
				});
			},
			mrepair() {
				uni.navigateTo({
					url: '/pages/index/repair/repair'
				});
			},
			tutoral() {
				uni.navigateTo({
					url: '/pages/index/advise/advise'
				})
			},
			/**
			 * @param {Object} obj判断字段是否为空
			 */
			isEmpty(obj) {
				if (typeof obj == "undefined" || obj == null || obj == "") {
					return true;
				} else {
					return false;
				}
			},
			getEquipmentInfo(){
				getEquipmentMsg(this.id).then((res) => {
					console.log(res)
					let _this = this
					if(res.code == 1){
						if(res.result[0].status == 1){
							this.equipmenmsgtlist = res.result
							console.log(res.result[0])
							this.$store.dispatch('setInfo', this.equipmenmsgtlist)
							this.isShow = true
							uni.hideLoading()
							this.mainShow = true
						}else{
							this.errInfo = "此设备未录入"
							this.isShow = false
							uni.hideLoading()
							this.mainShow = true
						}
					}else{
						this.errInfo = "此设备不存在"
						this.isShow = false
						uni.hideLoading()
						this.mainShow = true
					}
				})
			}
			
		},
		onLoad(op) {
			console.log(op.id)
			this.id = this.isEmpty(op.id) ? this.$store.getters.getEquipmentInfo.id : op.id
				/*根据设备id查设备信息 */
				uni.showLoading({
					title: '正在加载...'
				})
				setTimeout(()=>{
					this.getEquipmentInfo()
				},500)
				
			
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		/* height: 100%; */
		height: calc(100vh);
		background-color: #efeff4;

		.img-box {
			background-color: #efeff4;
			width: 90%;
			height: 700rpx;

			.font-left-right{
				width:28rpx;
				height: 380rpx;
				 margin: auto 0;
				 display: flex;
				 align-items: center;
			}
			.img {
				margin: 20rpx 11%;
				width: 380rpx;
				height: 380rpx;
			}
		}

		.type-box {
			background-color: #FFFFFF;
			text-align: center;
			width: 90%;
			height: 240rpx;
			
			.item{
				border-bottom: 2rpx solid rgb(241,241,241) ;
				height: 80rpx;
				
				
			}
			
		}

		.bottom-box {
			background-color: #f8f8f8;
			width: 90%;
			height: 200rpx;

			.course {
				width: 33.333%;
				height: 100%;
			}

			.repair {
				width: 33.333%;
				height: 100%;


			}

			.suggest {
				width: 33.333%;
				height: 100%;
				bottom: 0;
			}
		}

		.img-u {
			width: 30%;
			height: 40%;
		}
	}
	
	/*公告无缝滚动*/
	.moveBox{position: relative; width:100%; margin: 0 auto px2rem(50); overflow: hidden; white-space:nowrap; }
	.move{position: absolute; width:px2rem(1700); top: 0; left:100%; white-space:nowrap; animation:moveAni 15s infinite linear normal; }
	.item{float: left; width:px2rem(800); font-size: px2rem(20);}
	@keyframes moveAni{
	  0%{left:0;}
	  100%{left: px2rem(-800); }
	}
</style>
